<template>
  <div>
    <h1 class="text-3xl font-bold text-neutral-700">分页组件</h1>
    <show-code-box class="mb-[4rem]">
      <template #example>
        <div class="flex items-center p-[1rem]">
          <ss-pagination
            v-model:current="current"
            v-model:size="size"
            :total="130"
            @change="change"
          />
        </div>
      </template>
      <template #code>
        <pre>
            <code class="language-html text-sm mt-[-20px] mb-[-50px]">
                &lt;ss-pagination
                    v-model:current="current"
                    v-model:size="size"
                    :total="130"
                    @change="change"
                /&gt;

                &lt;script setup lang="ts"&gt;
                    const current = ref(1)
                    const size = ref(10)
                    const change = () => {
                      console.log(current.value, size.value)
                    }
                &lt;/script&gt;
            </code>
        </pre>
      </template>
    </show-code-box>
    <how-to-use-table :how-to-use="howToUse" />
  </div>
</template>

<script setup lang="ts">
  import highlight from 'highlight.js'
  definePageMeta({
    title: '分页组件',
    hideInMenu: false
  })
  useHead({
    title: '分页组件'
  })
  onMounted(() => {
    highlight.highlightAll()
  })

  const current = ref(1)
  const size = ref(10)
  const change = () => {
    console.log(current.value, size.value)
  }

  const howToUse = ref([
    {
      propName: 'v-model:current',
      mean: '当前页',
      type: 'number',
      default: '1'
    },
    {
      propName: 'v-model:size',
      mean: '每页大小',
      type: 'number',
      default: '10'
    },
    {
      propName: 'total',
      mean: '数据总数',
      type: 'number',
      default: '100'
    },
    {
      propName: 'layout',
      mean: '组件布局',
      type: 'string',
      default: 'total, sizes, prev, pager, next, jumper'
    },
    {
      propName: '@change',
      mean: '当前页或每页大小发生改变时触发',
      type: 'function',
      default: '-'
    }
  ])
</script>
